import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Calendar, CalendarList, Agenda, CalendarProvider, AgendaList } from 'react-native-calendars';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';

const leftArrowIcon = require('./img/previous.png');

export function CalendarExample11() {
    const [daySelected, setDaySelected] = useState('');
    const [dayLongSelected, setDayLongSelected] = useState('');
    const [monthSelected, setMonthSelected] = useState('');
    const [day, setDay] = useState('');
    const [day1, setDay1] = useState('');

    return (
        <ScrollView style={styles.container}>
            <Tester>
                {/* New Test Suite for firstDay */}
                <TestSuite name="firstDay">
                    <TestCase itShould="test Calendar firstDay property set to Monday (1)">
                        <Calendar
                            firstDay={1}
                            onDayPress={(day) => setDaySelected(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {daySelected || 'None'}
                        </Text>
                    </TestCase>
                    <TestCase itShould="test Calendar firstDay property set to Sunday (0)">
                        <Calendar
                            firstDay={0}
                            onDayPress={(day) => setDaySelected(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {daySelected || 'None'}
                        </Text>
                    </TestCase>
                </TestSuite>

                {/* New Test Suite for displayLoadingIndicator */}
                <TestSuite name="displayLoadingIndicator">
                    <TestCase itShould="test Calendar displayLoadingIndicator set to true">
                        <Calendar
                            displayLoadingIndicator={true}
                            markedDates={{
                                [day]: { selected: true, marked: true },
                            }}
                            onDayPress={(day) => setDay(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {day || 'None'}
                        </Text>
                    </TestCase>
                    <TestCase itShould="test Calendar displayLoadingIndicator set to false">
                        <Calendar
                            displayLoadingIndicator={false}
                            markedDates={{
                                [day]: { selected: true, marked: true },
                            }}
                            onDayPress={(day) => setDay(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {day || 'None'}
                        </Text>
                    </TestCase>
                </TestSuite>

                {/* New Test Suite for showWeekNumbers */}
                <TestSuite name="showWeekNumbers">
                    <TestCase itShould="test Calendar showWeekNumbers set to true">
                        <Calendar
                            showWeekNumbers={true}
                            onDayPress={(day) => setDay1(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {day1 || 'None'}
                        </Text>
                    </TestCase>
                    <TestCase itShould="test Calendar showWeekNumbers set to false">
                        <Calendar
                            showWeekNumbers={false}
                            onDayPress={(day) => setDay1(day.dateString)}
                        />
                        <Text style={styles.itemText}>
                            Selected Day: {day1 || 'None'}
                        </Text>
                    </TestCase>
                </TestSuite>
            </Tester>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        marginBottom: 20,
        borderColor: 'blue',
        borderWidth: 1,
    },
    itemText: {
        color: 'blue',
        fontSize: 12,
    },
});